<template>
	<view class="sample">
		<!-- 地址 -->
		<view class="addess">
			<view class="addess-item">
				<view class=" u-flex u-row-between" v-if="add==1">
					<view>
						<view class="addess-top u-flex u-m-b-10">
							<view class="name">小凤仙</view>
							<text class="number u-p-l-20">13212345678</text>
						</view>
						<view class="des u-font-md">浙江省杭州市余杭区恒生科技园17幢</view>
					</view>
					<u-icon name="arrow-right" color="#dadada" size="28"></u-icon>
				</view>
				<view class="add" v-else>
					点击添加地址
				</view>
			</view>
			<view class="icon"></view>
		</view>
		
		<view class="sample-box">
			<view class="item-box-image">
				<u-image
					class="image" 
					width="180rpx" 
					height="180rpx" 
					src="http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg"></u-image>
			</view>
			<view class="info">
				<view class="title u-font-lg u-m-b-35">
					YSL圣罗兰精彩底妆礼盒
					小金条21小粉条
				</view>
				<view class="con u-flex u-text-center u-m-t-10">
					<view class="li u-text-left">
						<view class="num">¥30.0</view>
						<text class="txt">到手价</text>
					</view>
					<view class="li">
						<view class="num">¥30.0</view>
						<text class="txt">佣金</text>
					</view>
					<view class="li  u-text-right">
						<view class="num">¥6.0</view>
						<text class="txt">可赚</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="sample-text">
			<view class="tit">领样说明</view>
			<view class="txt">1、粉丝不做具体要求，万粉左右，低于1w均可;</view>
			<view class="txt">2、赞藏/粉丝比例，大于2;</view>
			<view class="txt">3、账号权重，困困薯及以上;</view>
			<view class="txt">4、有过爆款笔记，1k即算爆款;</view>
			<view class="txt">5、有维护评论的习惯。</view>
			<view class="txt">6、垫子或者枕头品牌随机发送，产品赠送。亲们酌情报价，品牌优先考虑置换和酌情优惠博主。</view>
		</view>
		<view class="sampleBtn" @click="send">确认申请</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				add:1,
			}
		},
		methods: {
			send(){
				uni.navigateTo({
					url: '/pages/mine/sample/sampleSuccess'
				})
			},
			
		},onLoad() {
			
		}
	}
</script>

<style lang="scss" scoped>
.sample{
	padding: 30rpx;
	.addess{
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		&-item{
			padding: 30rpx;
			height: 160rpx;
			.add{
				text-align: center;
				line-height: 100rpx;
				font-size: 34rpx;
				font-weight: 600;
			}
		}
		&-top,.des{
			height: 40rpx;
			line-height: 40rpx;
			.name,.number{font-weight: 600;}
		}
		.icon{
			height: 8rpx;
			background: url(../../../static/icons/addess-icon.png)repeat-x left; 
			width: 100%;
		}
	} 
	&-box{
		display: flex;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
		.info{ 
			padding-left: 20rpx;
			width: 80%;
			.title{  
				display: flex; align-items: center; line-height: 45rpx; font-weight: 600;
				.u-font-lg{ padding-left: 20rpx; }
			}
			.con{ 
				.li{flex: 1; line-height: 30rpx; }
				.num{ color:#333; font-size: 30rpx; }
				.txt{ color:#666; font-size: 26rpx; }
			}
		 } 
	}
	&-text{
		padding: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		.tit{
			position: relative;
			height: 40rpx;
			line-height: 40rpx;
			padding-left: 40rpx;
			font-size: 34rpx;
			margin-bottom: 30rpx;
			&::after{
				content: "";
				width: 8rpx;
				height: 100%;
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				background-color: #de4f38;
			}
		}
		.txt{
			height: auto;
			line-height: 40rpx;
			margin-bottom: 10rpx;
		}
	}
	
	
	.sampleBtn{position: fixed; bottom: 0; left:0; z-index: 999; text-align: center; font-size: 32rpx; color:#fff; width: 100%; height:100rpx; line-height: 100rpx; background-color: #de4f38; }
}
</style>
